<template>
    <div class="box-con">
        <div class="con-main con-main-25">
            <div class="h4s animate__animated animate__fadeInUp">
                <div class="tit-l">资本运作总体概览</div>
                <div class="tit-r">
                    <!-- <div class="searchk">
                        <a-date-picker placeholder="选择年份" mode="year" :allowClear="false" @change="onChange">
                            <template #suffixIcon>
                                <caret-down-outlined style="color: #02FBFD" />
                            </template>
                        </a-date-picker>
                    </div> -->
                    <!-- <div class="more">查看更多</div> -->
                </div>
            </div>
            <div class="main-box animate__animated animate__fadeInUp">
                <div class="sta-box">
                    <div class="sta-li">
                        <img src="@/assets/bigScreen/costa-bg.png" alt="">
                        <div class="sta-li-r">
                            <div>企业数</div>
                            <h5>
                                    <CountTo :startVal='0' :endVal='1726' :separator='false'
                                        :duration='2000' /><span>个</span></h5>
                        </div>
                    </div>
                    <div class="sta-li">
                        <img src="@/assets/bigScreen/costa-bg.png" alt="">
                        <div class="sta-li-r">
                            <div>贷款额</div>
                            <h5><CountTo :startVal='0' :endVal='1726' :separator='false'
                                        :duration='2000' /><span>亿元</span></h5>
                        </div>
                    </div>
                    <div class="sta-li">
                        <img src="@/assets/bigScreen/costa-bg.png" alt="">
                        <div class="sta-li-r">
                            <div>融资额</div>
                            <h5><CountTo :startVal='0' :endVal='125.4' :separator='1'
                                        :duration='2000' /><span>亿元</span></h5>
                        </div>
                    </div>
                    <div class="sta-li">
                        <img src="@/assets/bigScreen/costa-bg.png" alt="">
                        <div class="sta-li-r">
                            <div>融资量</div>
                            <h5><CountTo :startVal='0' :endVal='92' :separator='1'
                                        :duration='2000' /><span>项</span></h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="con-main con-main-35">
            <div class="h4s animate__animated animate__fadeInUp">
                <div class="tit-l">投资机构</div>
                <div class="tit-r">
                    <!-- <div class="searchk">
                        <a-date-picker placeholder="选择年份" picker="year" :allowClear="false" @change="onChange">
                            <template #suffixIcon>
                                <caret-down-outlined style="color: #02FBFD" />
                            </template>
                        </a-date-picker>
                    </div> -->
                    <!-- <div class="more">查看更多</div> -->
                </div>
            </div>
            <div class="main-box animate__animated animate__fadeInUp">
                <div class="inst-box">
                    <div class="legend">
                        <div @click="gotoPath('/bigScreen/brokerPersonList')">投资人：{{setinstLines1DataAll()}}</div>
                        <div @click="gotoPath('/bigScreen/capitalBrokerList')">投资机构：{{setinstLinesDataAll()}}</div>
                    </div>

                    <piBarTwo v-if="instLinesData.length&&instLines1Data.length" :xData="instLinexData" :sData="instLinesData" :s1Data="instLines1Data"></piBarTwo>
                </div>
            </div>
        </div>
        <div class="con-main con-main-20">
                <div class="h4s animate__animated animate__fadeInUp">
                    <div class="tit-l">历年质押软著专利等科技成果数统计</div>
                    <div class="tit-r">
                        <!-- <div class="more">查看更多</div> -->
                    </div>
                </div>
                <div class="main-box animate__animated animate__fadeInUp">
                    <statistics ></statistics>

                </div>
        </div>
        <div class="con-main con-main-20">
            <!-- <div style="margin-top: 2rem;"> -->
                <div class="h4s animate__animated animate__fadeInUp">
                    <div class="tit-l">历年科技成果质押融资贷款笔数统计</div>
                    <div class="tit-r">
                        <!-- <div class="more">查看更多</div> -->
                    </div>
                </div>
                <div class="main-box animate__animated animate__fadeInUp">
                    <div class="finance-box">
                        <coBarTwo :xData="linexData" :sData="linesData"></coBarTwo>
                    </div>
                </div>
            <!-- </div> -->
        </div>
        <div class="con-main con-main-25">
            <div class="h4s animate__animated animate__fadeInUp">
                <div class="tit-l">融资需求</div>
                <div class="tit-r">
                    <!-- <div class="more">查看更多</div> -->
                </div>
            </div>
            <div class="main-box animate__animated animate__fadeInUp">
                <div class="lb-box">
                    <div class="lb-box-l">
                        <div class="lbbox-l-t"  @click="gotoPath('/bigScreen/financingList')">
                            <p>融资需求数量</p>
                            <div>
                                        <CountTo :startVal='0' :endVal='[lbData.financingTotal ? Number(lbData.financingTotal) : 0]' :separator='false'
                                        :duration='2000' />
                                    </div>
                        </div>
                        <div class="lbbox-l-b">
                            <div v-for="(v,k) in lbData.financingProjectList" :key="k" @click="gotoPath('/bigScreen/financingDetail',{id:v.id})">
                                <div v-if="k == 0 || k == 2" class="lbbox-li">
                                    <h6>{{ v.name }}</h6>
                                    <div class="lbbox-li-con">
                                        <div class="div lbbox-li-con-l">
                                            <div>融资类型:{{ v.financingMode }}</div>
                                            <div>融资形式:{{ v.financingMethod }}</div>
                                        </div>
                                        <div class="div lbbox-li-con-r">{{ v.amount }}</div>
                                        <!-- <div class="lbbox-li-con-r lbbox-li-con-r-ts">面议</div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lb-box-l">
                        <div class="lbbox-l-t lbbox-r-t">
                            <p>融资匹配数量</p>
                            <div> <CountTo :startVal='0' :endVal='[lbData.financingMateTotal ? Number(lbData.financingMateTotal) : 0]' :separator='false'
                                        :duration='2000' /></div>
                        </div>
                        <div class="lbbox-l-b" style="padding: 0 2rem 0 1rem;">
                            <div v-for="(v,k) in lbData.financingProjectList" :key="k">
                                <div v-if="k == 1 || k == 3" class="lbbox-li">
                                    <h6>{{ v.name }}</h6>
                                    <div class="lbbox-li-con">
                                        <div class="div lbbox-li-con-l">
                                            <div>融资类型:{{ v.financingMode }}</div>
                                            <div>融资形式:{{ v.financingMethod }}</div>
                                        </div>
                                        <div class="div lbbox-li-con-r">{{ v.amount }}</div>
                                        <!-- <div class="lbbox-li-con-r lbbox-li-con-r-ts">面议</div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="con-main con-main-35">
            <div class="h4s animate__animated animate__fadeInUp">
                <div class="tit-l">科技金融产品</div>
                <div class="tit-r">
                    <!-- <div class="more">查看更多</div> -->
                </div>
            </div>
            <div class="main-box animate__animated animate__fadeInUp">
                <div class="cb-box">
                    <div class="cb-box-l">
                        <div class="cb-box-l-con">
                            <div>
                                <CountTo :startVal='0' :endVal='2' :separator='false'
                                        :duration='2000' />
                                <!-- {{ cbData.bankLoanCount }} -->
                                <img src="@/assets/bigScreen/sath-numbg.png" alt="">
                            </div>
                            <img src="@/assets/bigScreen/sath-img.png" alt="">
                            <h6>对接银行(家)</h6>
                        </div>
                        <div class="cb-box-l-con" @click="gotoPath('/bigScreen/bankProjectList')">
                            <div style="color: #FFDD03;">
                                <CountTo :startVal='0' :endVal='[cbData.bankProductCount ? Number(cbData.bankProductCount) : 0]' :separator='false'
                                        :duration='2000' />
                                <img src="@/assets/bigScreen/sath-numbg2.png" alt="">
                            </div>
                            <img src="@/assets/bigScreen/sath-img.png" alt="">
                            <h6>金融产品(个)</h6>
                        </div>
                    </div>
                    <div class="cb-box-r">
                        <!-- <coBarThr v-if="cbLinexData.length != 0 && cbLinesData.length != 0" :xData="cbLinexData" :sData="cbLinesData"></coBarThr> -->
                        <coBarThr v-if="cbLinexData.length != 0 && cbLinesData.length != 0" :xData="cbLinexData" :sData="cbLinesData"></coBarThr>
                    </div>
                </div>
            </div>
        </div>
        <div class="con-main con-main-20">
            <div class="h4s animate__animated animate__fadeInUp">
                <div class="tit-l">近五年科技成果质押融资贷金额统计</div>
                <div class="tit-r">
                    <!-- <div class="more">查看更多</div> -->
                </div>
            </div>
            <div class="main-box animate__animated animate__fadeInUp" style="padding: 2rem;">
                <!-- <div class="trends-box">
                    <h5>最新政策浏览量TOP10</h5>
                    <div class="trends-box-con">
                        <div class="trends-box-con-li" v-for="(v,k) in trendsList" :key="k">
                            <div class="before-count">
                                <span>{{ k+1 }}</span>
                            </div>
                            <div class="trends-box-con-li-l">{{ v.title }}</div>
                            <div class="trends-box-con-li-r">{{ v.updateTime && v.updateTime.substring(0,10) }}</div>
                        </div>
                    </div>
                </div> -->

                <srLineArea :xData="linexMoneyData" :sData="linesMoneyData"></srLineArea>
            </div>
        </div>
        <div class="con-main con-main-20">
            <div class="h4s animate__animated animate__fadeInUp">
                <div class="tit-l">历年支持企业数统计</div>
                <div class="tit-r">
                    <!-- <div class="more">查看更多</div> -->
                </div>
            </div>
            <div class="main-box animate__animated animate__fadeInUp" style="padding: 2rem;">
                <enterprisesNum  :xData="linexDataEnterprises" :sData="linesDataEnterprises"></enterprisesNum>
            </div>
        </div>
    </div>
</template>

<script setup>
import piBarTwo from './component/piBarTwo.vue'
import enterprisesNum from './component/enterprisesNum.vue'
import statistics from './component/statistics.vue'
import srLineArea from './component/srLineArea.vue'
import coBar from '../childComponent/coBar.vue'
import coBarTwo from '../childComponent/coBarTwo.vue'
import coBarThr from '../childComponent/coBarThr.vue'
import { CountTo } from 'vue3-count-to'
import { ref, onMounted } from 'vue'
// import { CaretDownOutlined } from '@ant-design/icons-vue';
// import { getInstitutionData,getCapitalCountData,getFinancingData,getPolicyData,getProductVisits } from '../../../../../api/screenCapitalOperation.js'

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const linexData = ref(['2017','2018','2019','2020'])
const linesData = ref([1,6,40,53])

const linexDataEnterprises = ref(['2017','2018','2019','2020'])
const linesDataEnterprises = ref([39,42,48,37])

const linexMoneyData = ref(['2017', '2018', '2019', '2020'])
const linesMoneyData = ref([350,4990,143432,84228])
const instLinexData = ref([])
const instLinesData = ref([])
const instLines1Data = ref([])
const investorCount = ref([])
const cbData = ref({})
const lbData = ref({})
const cbLinexData = ref([])
const cbLinesData = ref([])
const trendsList = ref([])


const searchYear = ref(undefined)
const onChange = (date,dateStr) => {
    searchYear.value = dateStr
    getInstitutionDataFun()
}
const getInstitutionDataFun = () => {
    getInstitutionData().then(res=> {
        if (res.code == 200) {
            instLinexData.value = []
            instLinesData.value = []
            let datas = res.data?res.data:[]
            datas.map(v=>{
                instLinexData.value.push(v.name)
                instLinesData.value.push(v.count)
                instLines1Data.value.push(v.investorCount)

            })
            console.log('instLinexData',instLinexData);
        }
    })
}
const setinstLinesDataAll = (date,dateStr) => {
    let num=0
    instLinesData.value.map(item=>{
        num+=item
    })
    return num
}
const setinstLines1DataAll = (date,dateStr) => {
    let num=0
    instLines1Data.value.map(item=>{
        num+=item
    })
    return num
}
const getData = () => {
    // getInstitutionDataFun()
    // getCapitalCountData().then(res=>{
    //     if (res.code == 200) {
    //         investorCount.value = res.data.investorCount?res.data.investorCount.toString().split(''):[]
    //         cbData.value = res.data
    //     }
    // })
    // getProductVisits().then(res=>{
    //     if (res.code == 200) {
    //         // investorCount.value = res.data.investorCount?res.data.investorCount.toString().split(''):[]
    //         // cbData.value = res.data
    //         console.log(res);
    //         let datas = res.data?res.data:[]
    //         datas.map(v=>{
    //             cbLinexData.value.push(v.name)
    //             cbLinesData.value.push(v.visits)
    //         })
    //         console.log(cbLinexData);
    //         console.log(cbLinesData);
    //     }
    // })
    // getFinancingData().then(res=>{
    //     if (res.code == 200) {
    //         lbData.value = res.data
    //     }
    // })
    // getPolicyData().then(res=>{
    //     if (res.code == 200) {
    //         trendsList.value = res.data
    //     }
    // })
}
const gotoPath = (path, query) => {
    router.push({
        path: path,
        query: query,
    })
}
onMounted(() => {
    getData()
})

</script>

<style scoped lang="scss">
    h1,h2,h3,h4,h5,h6 {
        margin: 0;
    }
    .box-con {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        // align-items: center;
        flex-wrap: wrap;
        overflow: hidden;

        .con-main {
            width: calc((100% - 3rem) / 3);
            height: calc((100% - 2rem) / 2);
            .con-main-t {
                height: calc((100% - 2rem) / 2);
            }
            .main-box {
                height: calc(100% - 4.5rem);
                // background-image: url('../../../../../assets/bigScreen/square-bg.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                border: 1px solid #07294C;

                .sta-box {
                    height: 100%;
                    padding: 2rem;
                    display: flex;
                    // align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    box-sizing: border-box;

                    @keyframes fadenum {
                        100% {
                            transform: rotate(360deg);
                        }
                    }

                    .sta-li {
                        width: calc((100% - 2rem) / 2);
                        height: calc((100% - 2rem) / 2);
                        border-radius: 0.6rem;
                        background: #00183B;
                        border: 0.1rem solid rgba(45, 205, 255, 0.17);
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        padding: 0 0rem;
                        &:nth-child(n+3) {
                            margin-top: 2rem;
                        }
                        img {
                            width: 6rem;
                            height: 6rem;
                            animation: fadenum 2s infinite;
                        }
                        .sta-li-r {
                            div {
                                font-size: 2rem;
                                line-height: 2.8rem;
                                color: rgba(255, 255, 255, 0.64);
                            }
                            h5 {
                                font-size: 3.2rem;
                                line-height: 4.5rem;
                                font-weight: bold;
                                color: rgba(255, 255, 255, 0.87);
                                span:nth-child(1) {
                                font-size: 3.2rem;
                                font-weight: bold;
                                }
                                span:nth-child(2) {
                                    font-size: 1.6rem;
                                    font-weight: normal;
                                }
                            }
                        }
                    }
                }
                .inst-box {
                    padding: 2rem;
                    height: 100%;
                    .legend{
                        color: #fff;
                        text-align: end;
                        display: flex;
                        justify-content: end;
                        font-weight: 600;
                        cursor: pointer;
                        div:nth-child(1){
                            color: #00B9FF;
                            margin-right: 20px;
                        }
                        div:nth-child(2 ){
                            color: #FACE44;
                        }
                    }
                }
                .investor-box {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    text-align: center;
                    padding: 1rem 0;
                    .num-li-r {
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        div {
                            background-image: url('@/assets/bigScreen/num-bg.png');
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            color: #FFDD03;
                            font-size: 3.2rem;
                            width: 3.7rem;
                            height: 5.5rem;
                            line-height: 5.5rem;
                            border-radius: 0.5rem;
                            background: #052557;
                            border: 0.1rem solid rgba(45, 204, 255, 0.25);
                            box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.3);
                            text-align: center;
                            font-family: 'ffa';
                            margin: 0 0.2rem;
                        }
                    }
                    h5 {
                        font-size: 1.3rem;
                        color: #2DCCFF;
                        font-weight: normal;
                    }
                    img {
                        width: 21.4rem;
                        height: 0.2rem;
                        margin: 0 auto;
                    }
                }
                .finance-box {
                    height: 100%;
                    padding: 1rem;
                }
                .lb-box {
                    display: flex;
                    flex-wrap: wrap;
                    padding: 1rem 0;
                    height: 100%;
                    .lb-box-l {
                        width: 50%;
                        height: 100%;

                        @keyframes breathing {
                            0% { transform: scale(1); }
                            50% { transform: scale(0.9); }
                            100% { transform: scale(1); }
                        }

                        .lbbox-l-t {
                            width: 13.9rem;
                            height: 14.4rem;
                            background-image: url('@/assets/bigScreen/lbtl-bg.png');
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            color: #fff;
                            font-size: 2.4rem;
                            text-align: center;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            margin: auto;
                            animation: breathing 3s ease-in-out infinite;
                            p {
                                margin: 0;
                                font-size: 1.4rem;
                                font-weight: normal;
                                line-height: 2.4rem;
                                text-align: center;
                                letter-spacing: 0;
                                color: #D0DEEE;
                            }
                        }
                        .lbbox-r-t {
                            background-image: url('@/assets/bigScreen/lbtr-bg.png');
                        }
                        .lbbox-l-b {
                            padding: 0 1rem 0 2rem;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-around;
                            margin-top: 1rem;
                            height: calc(100% - 14.4rem - 1rem);
                            cursor: pointer;
                            .lbbox-li {
                                border-radius: 0.4rem;
                                margin-bottom: 0.7rem;
                                padding: 0.7rem;
                                background: #12264A;
                                h6 {
                                    font-size: 1.4rem;
                                    font-weight: normal;
                                    color: #00FFF4;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                                .lbbox-li-con {
                                    margin-top: 1rem;
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    .lbbox-li-con-l {
                                        div {
                                            font-size: 1.2rem;
                                            color: #FFFFFF;
                                        }
                                    }
                                    .lbbox-li-con-r {
                                        font-size: 1.2rem;
                                        color: #FFDD03;
                                    }
                                    .lbbox-li-con-r-ts {
                                        font-size: 1.8rem;
                                    }
                                }
                            }
                        }
                    }
                }
                .cb-box {
                    padding: 2rem;
                    display: flex;
                    height: 100%;
                    .cb-box-l {
                        width: 30%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        .cb-box-l-con {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-around;
                            background-image: url('@/assets/bigScreen/sath-bg.png');
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            height: calc((100% - 2rem) / 2);
                            padding: 1rem 0;
                            div {
                                text-align: center;
                                position: relative;
                                line-height: 5.3rem;
                                font-size: 2.8rem;
                                color: #89FF3B;
                                letter-spacing: 0.2rem;
                                img {
                                    position: absolute;
                                    width: 15.6rem;
                                    height: 100%;
                                    top: 0;
                                    left: 50%;
                                    transform: translateX(-50%);
                                }
                            }
                            >img {
                                width: 11.5rem;
                                margin: 0 auto;
                            }
                            h6 {
                                font-size: 1.4rem;
                                font-weight: normal;
                                line-height: 1.7rem;
                                text-align: center;
                                color: #FFFFFF;
                            }
                        }
                    }
                    .cb-box-r {
                        width: 70%;
                        height: 100%;
                        padding-left: 2rem;
                    }
                }
                .trends-box {
                    height: 100%;
                    padding: 2rem 1.5rem;
                    h5 {
                        font-size: 1.6rem;
                        font-weight: 500;
                        line-height: 2.5rem;
                        letter-spacing: 0;
                        color: #FFFFFF;
                        padding-left: 0.8rem;
                        border-left: 0.3rem solid #02E1E2;
                        margin-bottom: 0.8rem;
                    }
                    .trends-box-con {
                        margin-top: 1rem;
                        height: calc(100% - 4.3rem);
                        overflow-y: scroll;
                        scrollbar-width: none; /* firefox */
                        -ms-overflow-style: none; /* IE 10+ */

                        .trends-box-con-li {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 1rem;
                            .before-count{
                                display: block;
                                width: 2.5rem;
                                height: 2.5rem;
                                text-align: center;
                                padding-top: 0.1rem;
                                font-size: 1.2rem;
                                color: #4972B8;
                                background-size: 100% 100%;
                                background-image: url('@/assets/bigScreen/sorts-pt.png');
                                span{
                                    display: block;
                                    transform: translateX(-1px);
                                }
                            }
                            &:first-child{
                                .before-count{
                                    background-image: url('@/assets/bigScreen/sorts1.png');
                                    color: #C6502D;
                                }
                            }
                            &:nth-child(2){
                                .before-count{
                                    background-image: url('@/assets/bigScreen/sorts2.png');
                                    color: #FFA514;
                                }
                            }
                            &:nth-child(3){
                                .before-count{
                                    background-image: url('@/assets/bigScreen/sorts3.png');
                                    color: #2DCCFF;
                                }
                            }
                            &:last-child {
                                margin-bottom: 0;
                            }
                            .trends-box-con-li-l {
                                flex: 1;
                                font-size: 1.3rem;
                                color: #15E8FF;
                                max-width: 80%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                margin-right: 1rem;
                            }
                            .trends-box-con-li-r {
                                font-size: 1.3rem;
                                color: rgba(21, 232, 255, 0.46);
                            }
                        }
                    }
                    .trends-box-con::-webkit-scrollbar {
                        display: none; /* Chrome Safari */
                    }
                }
            }
        }
        .con-main-30 {
            width: calc((100% - 3rem) / 10*3);
            .h4s {
                background-image: url('@/assets/bigScreen/title-bg4.png');
            }
        }
        .con-main-20 {
            width: calc((100% - 3rem) / 5);
            .h4s {
                background-image: url('@/assets/bigScreen/title-bg4.png');
            }
        }
        .con-main-25 {
            width: calc((100% - 3rem) / 4);
            .h4s {
                background-image: url('@/assets/bigScreen/title-bg4.png');
            }
        }
        .con-main-50 {
            width: calc((100% - 3rem) / 4 * 2);
            .h4s {
                background-image: url('@/assets/bigScreen/title-bg2.png');
            }
        }
        .con-main:nth-child(n+5) {
            margin-top: 2rem;
        }
    }
    .h4s {
        height: 4.5rem;
        line-height: 4.5rem;
        background-image: url('@/assets/bigScreen/title-bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1.6rem 0.3rem 4.7rem;
        box-sizing: border-box;

        .tit-l {
            font-size: 1.8rem;
            font-weight: bold;
            line-height: 2.6rem;
            letter-spacing: 0;
            color: #FFFFFF;
            text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);

            span {
                font-size: 1.4rem;
                letter-spacing: 0;
                color: rgba(255, 255, 255, 0.62);
                margin-left: 1.8rem;
            }
        }

        .tit-r {
            display: flex;
            align-items: center;
        }
        .more {
            font-size: 1.2rem;
            font-weight: normal;
            line-height: 2.6rem;
            letter-spacing: 0rem;
            color: rgba(255, 255, 255, 0.8);
            text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);
            cursor: pointer;
        }
    }
    ::v-deep .searchk .ant-picker {
        background-color: inherit;
        border: 0.1rem solid rgba(2, 251, 253, 0.3);
    }
    ::v-deep .searchk .ant-picker-input > input {
        color: #02FBFD
    }
</style>

